<template>
  <div class="order_index">
    <header class="top">
      <span>消费记录</span>
    </header>
    <div
      style="text-align: center;margin-top:0.5rem"
      v-if="killOrderList.length == 0"
    >
      您暂未此类型消费记录
    </div>
    <section class="center">
      <template v-for="(ele, index) in killOrderList">
        <div class="item" :key="ele.id">
          <div style="width:100%;display:flex;align-items: center;">
            <div class="left">
              <span class="cont">
                秒杀活动 -
                {{ ele.saleActivityName }}
              </span>
              <span class="time">{{ ele.createTime }}</span>
            </div>
            <div class="right add">- {{ ele.amt }} 元</div>
          </div>
        </div>
      </template>
    </section>
    <footer class="bottom">
      <van-pagination
        v-model="queryForm.pageNum"
        :total-items="total"
        :items-per-page="queryForm.pageSize"
        mode="simple"
        @change="getList"
        v-if="total > queryForm.pageSize"
      >
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
        <template #page="{ text }">{{ text }}</template>
      </van-pagination>
    </footer>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions } from "vuex";
import Vue from "vue";
import { Pagination, Icon } from "vant";
Vue.use(Icon);
Vue.use(Pagination);
export default {
  name: "SecondKillOrder",
  head() {
    return {
      title: "我的订单"
    };
  },
  data() {
    return {
      total: 0,
      queryForm: {
        pageNum: 1, //第几页
        pageSize: 10 // 容量
      },
      killOrderList: []
    };
  },
  computed: {
    ...mapGetters({
      userInfo: "authen/userInfo"
    })
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取订单列表
    async getList() {
      const params = { ...this.queryForm };
      params.userId = this.$store.state.authen.userInfo.userId;
      params.mobilePhone = this.$store.state.authen.userInfo.mobilePhone;
      const res = await this.$axios.$get("/saleActivityOrder/list/user", {
        params: {
          enterpriseId: this.enterpriseId,
          userId: params.userId,
          mobilePhone: params.mobilePhone,
          pageNum: params.pageNum,
          pageSize: params.pageSize
        }
      });
      this.killOrderList = res.data.list;
    }
  }
};
</script>
<style lang="scss" scoped>
.order_index {
  padding: 0.4rem;
  padding-bottom: 0;
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: #f5f5f5;
  .top {
    background-color: #f8f8f8;
    overflow: hidden;
    padding: 0.2rem 0.25rem;
    display: flex;
    justify-content: space-between;
    text-align: center;
    font-size: 0.25rem;
    .icon {
      margin-left: 0.1rem;
      display: inline-block;
      width: 0.2rem;
      height: 0.15rem;
      background: url("../../../static/common/1_b01_down.2x.png") no-repeat 0 0;
      background-size: 100% 100%;
    }
  }
  .center {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    > .item {
      height: 1.9rem;
      padding: 0.3rem 0.25rem;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      .left {
        width: 70%;
        display: flex;
        flex-direction: column;
        .cont {
          color: #292929;
          font-size: 0.26rem;
          font-weight: bold;
          min-height: 0.9rem;
          // line-height: 0.9rem;
        }
        .time {
          color: #9f9f9f;
          font-size: 0.2rem;
          height: 0.4rem;
          line-height: 0.4rem;
        }
      }
      .right {
        width: 25%;
        text-align: right;
        line-height: 1.3rem;
        font-size: 0.26rem;
        font-weight: bold;
      }
      .add {
        color: #c5ac61;
      }
    }
  }
  .bottom {
    width: 100%;
  }
}
</style>
